<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>Main</title>
    <script src="${ctx}/static/libs/loading.js" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/util.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/absPainter.js" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/ajax.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/crossLines.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/axis-x.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/linepainter.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/volumePainter.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/axis-y.js?a" type="text/javascript" charset="GBK"></script>
    <script src="${ctx}/static/libs/chartEventHelper.js?a" type="text/javascript" charset="GBK"></script>
</head>
<body>

<!-- content S -->
<div id="content">
    <div class="siteWidth">
        <%--tittle S--%>
        <h1 class="main-tt">股 票 交 易 所</h1>
        <%--tittle E--%>

        <%--股市概况 S--%>
        <div class="w-table wd2 f-fl">
            <table id="stockTable" class="display" border="0" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <td colspan="4" class="blue c-white">
                        <div class="table-tt">股市概况</div>
                </tr>
                <tr>
                    <th class="c-red"><i class="icon-edit"></i> 股票代码</th>
                    <th class="c-red"><i class="icon-home"></i> 名称</th>
                    <th class="c-red"><i class="icon-jpy"></i> 当前价格</th>
                    <th class="c-red"><i class="icon-bolt"></i> 剩余股数</th>
                </tr>
                </thead>

                <tbody>

                </tbody>

            </table>
        </div>
        <%--股市概况 E--%>

        <%--排行榜 S--%>
        <div class="w-table wd2 f-fr">
            <table id="traderTable" border="0" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <td colspan="2" class="red c-white">
                        <div class="table-tt">排行榜</div>
                </tr>
                <tr>
                    <th class="c-red"><i class="icon-user"></i> 交易人</th>
                    <th class="c-red"><i class="icon-jpy"></i> 当前资产</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <%--排行榜 E--%>

        <div class="clear space10"></div>
    </div>
    <!-- siteWidth E -->


    <div class="space20 blue"></div>
    <div class="clear space10"></div>
    <%--banner start--%>
    <div class="banner">
        <div class="bd">
            <div class="banner-ul">
                <div class="banner-li">
                    <%--股票详情？S--%>
                    <div class="w-table wd2 f-fl">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="2" class="red c-white">
                                    <div class="table-tt">个股详情</div>
                            </tr>
                            <tr>
                                <th class="c-red"><i class="icon-edit"></i> 股票代码</th>
                                <td><p id="stockCode"></p></td>
                            </tr>
                            <tr>
                                <th class="c-red"><i class="icon-home"></i> 名称</th>
                                <td><p id="stockName"></p></td>
                            </tr>
                            <tr>
                                <th class="c-red"><i class="icon-jpy"></i> 当前价格</th>
                                <td><p id="stockPrice"></p></td>
                            </tr>
                            <tr>
                                <th class="c-red"><i class="icon-bolt"></i> 剩余股数</th>
                                <td><p id="stockSurVolume"></p></td>
                            </tr>
                        </table>
                    </div>
                    <%--股票详情？E--%>

                    <%--指数图 S--%>
                    <canvas id="canvas" width="478" height="310" class="f-fr" style="z-index: 3; background: transparent;
                            border: 1px solid #69c">
                        <p>你的浏览器不支持html5哟</p>
                    </canvas>
                    <%--指数图 E--%>
                    <div class="clear space5"></div>
                    <%--股票交易信息 S--%>
                    <div class="w-table">
                        <table id="tradeTable" border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr>
                                <td><i class="icon-user"></i> 交易人</td>
                                <td><i class="icon-jpy"></i> 交易金额</td>
                                <td><i class="icon-refresh"></i> 买入/卖出</td>
                                <td><i class="icon-bolt"></i> 交易数量</td>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <%--股票交易信息 E--%>
                </div>
            </div>
        </div>
    </div>


    <%--banner end--%>

</div>
<!-- content E -->

<script type="text/javascript">
var stocks = [];
var stockPrice = [];
var i = 0;
var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");

function getNextIndex() {
    if (stocks.length - 1 == i) {
        i = 0;
    } else {
        i++;
    }
}

function stockIter() {
//    stockTable.fnDraw();
//    traderTable.fnDraw();
    $.get("${ctx}/ajax?code=" + stocks[i], function (data) {
        $("#stockTable tbody").empty().html(Mustache.render($("#stockTemplate").html(), data));
        $("#traderTable tbody").empty().html(Mustache.render($("#traderTemplate").html(), data));
        $("#tradeTable tbody").empty().html(Mustache.render($("#tradeTemplate").html(), data));
    });
    $.get("${ctx}/getStock", {code: stocks[i], action: 'MIN' }, function (data) {
        if (data != null) {
            $("#stockCode").text(data.code);
            $("#stockName").text(data.name);
            $("#stockPrice").text(data.price);
            $("#stockSurVolume").text(data.surVolume);
            if (data.mins == null) {
                var min = {};
                min.price = data.price;
                min.volume = 0;
                min.amount = 0;
                data.mins = [min];
            }
            data.quote.time = '20140507130000';
            data.quote.price = data.price;
            context.clearRect(0, 0, canvas.width(), canvas.height());
            chart.paint(data);
//            tradeTable.fnDraw();

        }
    });
    getNextIndex();
}
function line(ctx, x0, y0, x1, y1, color, width) {
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(x1, y1);
    ctx.strokeStyle = color;
    ctx.lineWidth = width || 1;
    ctx.stroke();
}

function getMinTime(minIndex) {
    //上午09：30-11：30
    //下午13：00-15：00
    var d = new Date();
    if (minIndex <= 50) {
        d.setHours(13, 00, 00);
        d = new Date(d.getTime() + (minIndex) * 60 * 1000);
    }


    var hour = d.getHours() > 9 ? new String(d.getHours()) : '0' + d.getHours();
    var minutes = d.getMinutes() > 9 ? new String(d.getMinutes()) : '0' + d.getMinutes();
    var seconds = '30';
    return hour + '' + minutes + seconds;
}

function Tip(options) {
    this.options = options;
    this.canvas = options.canvas;
    this.canvas.tip = this;
}

Tip.prototype = {
    show: function (relativePoint, html) {
        var dc = this.dataContext;
        var painter = this.canvas.painter;
        if (dc) {
            if (dc.isNewQuote) painter.fillTopText(dc.data);
            else painter.fillTopText(dc.data, dc.index);
        }
    },
    update: function (relativePoint, html) {
        this.show(relativePoint, html);
    },
    hide: function () {
        var dc = this.dataContext;
        var painter = this.canvas.painter;
        if (dc) {
            painter.fillTopText(dc.data);
        }
    }
};

function minsChart(canvasId, options) {
    extendObject(options, this);
    this.canvas = $id(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.canvas.painter = this;
}
minsChart.prototype = {
    /*
     data format like :{
     quote: {
     time: 20111214150106,
     open: 2241.390,
     preClose: 2248.590,
     highest: 2256.740,
     lowest: 2224.730,
     price: 2228.530,
     volume: 4407982200,
     amount: 38621178573
     },
     mins: [
     {price:2239.45,volume:49499299,amount:459279327}
     ]
     }
     */
    paint: function (data) {
        this.fillTopText(data);
        this.paintChart(data);
        this.paintxAxis();
        this.fillBottomText(data);
        this.paintVolume(data);
    },

    paintVolume: function (data) {
        var ctx = this.ctx;
        var options = this.volume;
        ctx.beginPath();
        ctx.rect(options.region.x, options.region.y, options.region.width, options.region.height);
        ctx.strokeStyle = options.borderColor;
        ctx.stroke();
        line(ctx, options.region.x, options.region.y + options.region.height / 2, options.region.x + options.region.width, options.region.y + options.region.height / 2, options.splitLineColor);
        options.getDataLength = function () {
            return this.data.items.length;
        };
        options.maxDotsCount = this.maxDotsCount;
        var volumePainterImp = new volumePainter(options);
        var painter = new Painter(this.canvas.id, volumePainterImp, { items: data.mins });
        painter.paint();

        var max = painter.maxVolume;
        var unit;
        if (max / 1000000 > 1000) {
            max = max / 1000000;
            unit = '百万';
        } else {
            max = max / 10000;
            unit = '万';
        }
        var scalers = [max.toFixed(2), (max / 2).toFixed(2), '(' + unit + ')'];
        var yscaler = new yAxis(this.volume.yScaler);
        var painter = new Painter(this.canvas.id, yscaler, scalers);
        painter.paint();
    },

    fillBottomText: function (data) {
        if (!this.bottomText) return;
        //高9999 低9999 成交888999
        var ctx = this.ctx;
        var txt = '高';
        var options = this.bottomText;
        ctx.font = options.font;
        ctx.fillStyle = options.color;
        var w = ctx.measureText(txt).width;
        ctx.fillText(txt, options.region.x, options.region.y);
        var x = options.region.x + w;
        var quote = data.quote;
        var me = this;

        function getTxtColor(val) {
            return val > quote.preClose ? me.riseColor : (val == quote.preClose ? me.normalColor : me.fallColor);
        }

        var highColor = getTxtColor(quote.highest);
        var high = toMoney(quote.highest);
        ctx.fillStyle = highColor;
        w = ctx.measureText(high).width;
        ctx.fillText(high, x, options.region.y);
        x += w;
        txt = ' 低';
        ctx.fillStyle = options.color;
        w = ctx.measureText(txt).width;
        ctx.fillText(txt, x, options.region.y);
        x += w;
        var lowColor = getTxtColor(quote.lowest);
        var low = toMoney(quote.lowest);
        w = ctx.measureText(low).width;
        ctx.fillStyle = lowColor;
        ctx.fillText(low, x, options.region.y);
        x += w;
        ctx.fillStyle = options.color;
        var amount = ' 成交' + bigNumberToText(quote.amount);
        ctx.fillText(amount, x, options.region.y);
    },

    paintxAxis: function () {
        var xAxisImpl = new xAxis(this.xScaler);
        var xAxisPainter = new Painter(this.canvas.id, xAxisImpl, this.xScaler.data);
        xAxisPainter.paint();
    },

    paintChart: function (data) {
        var minsChartOptions = this.minsChart;
        var region = this.minsChart.region;
        var ctx = this.ctx;
        ctx.beginPath();
        ctx.strokeStyle = minsChartOptions.borderColor;
        ctx.rect(region.x, region.y, region.width, region.height);
        ctx.stroke();

        //水平线
        var middleIndex = (this.minsChart.horizontalLineCount + this.minsChart.horizontalLineCount % 2) / 2;
        var splitCount = this.minsChart.horizontalLineCount + 1;
        for (var i = 1; i <= this.minsChart.horizontalLineCount; i++) {
            var color = (i == middleIndex ? minsChartOptions.middleLineColor : minsChartOptions.otherSplitLineColor);
            var y = region.y + region.height * i / splitCount;
            line(ctx, region.x, y, region.x + region.width, y, color);
        }
        //垂直线
        splitCount = this.minsChart.verticalLineCount + 1;
        for (var i = 1; i <= this.minsChart.verticalLineCount; i++) {
            var x = region.x + region.width * i / splitCount;
            line(ctx, x, region.y, x, region.y + region.height, minsChartOptions.otherSplitLineColor);
        }

        //价格线
        var lineOptions = {
            region: region,
            maxDotsCount: this.maxDotsCount,
            getDataLength: function () {
                return this.data.items.length;
            },
            getItemValue: function (item) {
                return item.price;
            },
            middleValue: data.quote.preClose, //通常是昨收
            lineColor: minsChartOptions.priceLineColor
        };
        var linePainterImp = new linePainter(lineOptions);
        var priceLinePainter = new Painter(this.canvas.id, linePainterImp, { items: data.mins });
        priceLinePainter.paint();

        //y轴
        var yOptions = this.minsChart.yScalerLeft;
        var preClose = data.quote.preClose;
        var me = this;
        yOptions.color = function (val) {
            return val > preClose ? me.riseColor : (val == preClose ? me.normalColor : me.fallColor);
        };
        var scalersLeft = [];
        var scalersRight = [];
        var min = preClose - priceLinePainter.maxDiff;
        var space = priceLinePainter.maxDiff * 2 / (this.minsChart.horizontalLineCount + 1);
        for (var i = this.minsChart.horizontalLineCount + 1; i >= 0; i--) {
            var val = min + i * space;
            scalersLeft.push(val.toFixed(2));
            var percent = (val - preClose) * 100 / preClose;
            scalersRight.push(percent.toFixed(2) + '%');
        }
        var yx = new yAxis(yOptions);
        var yAxisPainter = new Painter(this.canvas.id, yx, scalersLeft);
        yAxisPainter.paint();

        var yPercentOptions = this.minsChart.yScalerRight;
        yPercentOptions.color = function (val) {
            return (val == '0.00%' ? 'black' : (val.charAt(0) == '-' ? 'green' : 'red'));
        };
        var yxPercent = new yAxis(yPercentOptions);
        var yxPercentPainter = new Painter(this.canvas.id, yxPercent, scalersRight);
        yxPercentPainter.paint();


        //均线
        if (this.needPaintAvgPriceLine) {
            //生成移动均线数据
            var items = [];
            var totalVolume = 0;
            var totalAmount = 0;
            data.mins.each(function (item) {
                totalVolume += item.volume;
                totalAmount += item.amount;
                items.push(totalAmount / totalVolume);
            });
            lineOptions.lineColor = minsChartOptions.avgPriceLineColor;
            lineOptions.getItemValue = function (item) {
                return item;
            };
            linePainterImp = new linePainter(lineOptions);
            var painterAvg = new Painter(this.canvas.id, linePainterImp, { items: items });
            painterAvg.paint();
        }

        var me = this;
        var chartRegion = me.minsChart.region;

        function getY(x) {
            var index = Math.ceil((x - me.minsChart.region.x) * me.maxDotsCount / me.minsChart.region.width);
            var val;
            var isNewQuote;
            if (index >= 0 && index < data.mins.length) {
                val = data.mins[index].price;
                isNewQuote = false;
            } else {
                val = data.quote.price;
                isNewQuote = true;
            }

            if (me.canvas.tip) me.canvas.tip.dataContext = { data: data, isNewQuote: isNewQuote, index: index };
            var diff = val - preClose;
            var middleY = (me.minsChart.region.y + me.minsChart.region.height / 2);
            return middleY - diff * me.minsChart.region.height / 2 / priceLinePainter.maxDiff;
        }

        //添加鼠标事件
        addCrossLinesAndTipEvents(this.canvas, {
            getCrossPoint: function (ev) {
                return { x: ev.offsetX, y: getY(ev.offsetX) };
            },
            triggerEventRanges: { x: chartRegion.x, y: chartRegion.y, width: chartRegion.width, height: me.volume.region.y + me.volume.region.height - chartRegion.y },
            tipOptions: {
                getTipHtml: function (ev) {
                    return null;
                },
                position: { x: false, y: false }
            },
            crossLineOptions: {
                color: 'black'
            }
        });
    },

    fillTopText: function (data, minIndex) {
        var quote = data.quote;
        var ctx = this.ctx;
        var topText = this.topText;
        var region = topText.region;
        ctx.clearRect(region.x, region.y, region.width, region.height);
        var price;
        var time;
        if (typeof minIndex == 'undefined') {
            price = quote.price;
            time = quote.time;
        } else {
            price = data.mins[minIndex].price;
            time = quote.time.toString().substr(0, 8) + getMinTime(minIndex);
        }

        ctx.fillStyle = topText.color;
        ctx.font = topText.font;
        if (topText.textBaseline) ctx.textBaseline = topText.textBaseline;
        var txt = '最新' + toMoney(price);
        var width = ctx.measureText(txt).width;
        ctx.fillText(txt, topText.region.x, topText.region.y);

        var isRise = price > quote.preClose;
        var isEqual = price == quote.preClose;
        var isFall = price < quote.preClose;
        var diff = toMoney(price - quote.preClose);
        var txtRiseFall = (isRise ? '↑' : (isFall ? '↓' : '')) + diff
                + ('(')
                + toMoney(diff * 100 / quote.preClose)
                + '%)';

        var x = topText.region.x + width;
        ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
        ctx.fillText(txtRiseFall, x, topText.region.y);

        var temp = new String(time);
        var txtTime = temp.charAt(8) + temp.charAt(9) + ':' + temp.charAt(10) + temp.charAt(11);
        ctx.fillStyle = topText.color;
        var timeWidth = ctx.measureText(txtTime).width;
        ctx.fillText(txtTime, topText.region.x + topText.region.width - timeWidth, topText.region.y);
    }
};


//<c:forEach items="${stocks}" var="stock">
stocks.push('${stock.code}');
//</c:forEach>


var chart = new minsChart('canvas', {
    fallColor: 'green', riseColor: 'red', normalColor: 'black', maxDotsCount: 241, needPaintAvgPriceLine: false,
    backgroundColor: 'white',
    topText: { font: '12px 宋体', color: 'black', region: { x: 58.5, y: 5.5, width: 305, height: 14 }, textBaseline: 'top' },
    minsChart: {
        region: { x: 56.5, y: 21.5, width: 310, height: 200 },
        priceLineColor: 'blue', avgPriceLineColor: 'red', middleLineColor: 'red', otherSplitLineColor: 'lightgray', borderColor: 'gray',
        horizontalLineCount: 7, verticalLineCount: 3,
        yScalerLeft: { font: '12px Arial', region: { x: .5, y: 20, width: 50.5, height: 200 }, align: 'right', fontHeight: 9, textBaseline: 'top' },
        yScalerRight: { font: '12px Arial', region: { x: 368.5, y: 20, width: 40.5, height: 200 }, align: 'right', fontHeight: 9, textBaseline: 'top' }
    },
    xScaler: {
        font: '12px Arial', color: 'black',
        region: { x: 56.5, y: 225, width: 310, height: 20 },
        data: ['10min', '20min', '30min', '40min', '50min']
    },

    //bottomText: { font: '11px 宋体', color: 'black', region: { x: 5.5, y: 260, width: 400, height: 20} },
    volume: {
        region: { x: 56.5, y: 245.5, width: 310, height: 60 },
        bar: { color: 'green', width: 2 },
        borderColor: 'lightgray', splitLineColor: 'lightgray',
        yScaler: { font: '12px Arial', region: { x: .5, y: 242.5, width: 50.5, height: 60 }, color: 'black', align: 'right', fontHeight: 12, textBaseline: 'top' }
    }
});
stockIter();
setInterval(stockIter, 10000);


<%--var stockTable = $('#stockTable').dataTable({--%>
<%--"paging": false,--%>
<%--"searching": false,--%>
<%--"ajax": '${ctx}/ajax?action=stock',--%>
<%--"columns": [--%>
<%--{ "data": "code" },--%>
<%--{ "data": "name" },--%>
<%--{ "data": "price" },--%>
<%--{ "data": "surVolume" }--%>
<%--]--%>
<%--});--%>
<%--var traderTable = $('#traderTable').dataTable({--%>
<%--"paging": false,--%>
<%--"searching": false,--%>
<%--"ajax": '${ctx}/ajax?action=trader',--%>
<%--"columns": [--%>
<%--{ "data": "name" },--%>
<%--{ "data": "currAmount" }--%>
<%--]--%>
<%--});--%>
<%--var tradeTable = $('#tradeTable').dataTable({--%>
<%--"paging": false,--%>
<%--"searching": false,--%>
<%--"ajax": '${ctx}/ajax?action=trade&code=' + 100001,--%>
<%--"columns": [--%>
<%--{ "data": "trader" },--%>
<%--{ "data": "tradePrice" },--%>
<%--{ "data": "type" },--%>
<%--{ "data": "tradeCount" }--%>
<%--]--%>
<%--});--%>


</script>

<script type="text/template" id="stockTemplate">
    {{#stock}}
    <tr>
        <td>{{code}}</td>
        <td>{{name}}</td>
        <td>{{price}}</td>
        <td>{{surVolume}}</td>
    </tr>
    {{/stock}}
</script>
<script type="text/template" id="traderTemplate">
    {{#trader}}
    <tr>
        <td>{{name}}</td>
        <td>{{currAmount}}</td>
    </tr>
    {{/trader}}
</script>
<script type="text/template" id="tradeTemplate">
    {{#trade}}
    <tr>
        <td>{{trader}}</td>
        <td>{{price}}</td>
        <td>{{type}}</td>
        <td>{{tradeCount}}</td>
    </tr>
    {{/trade}}
</script>
</body>
</html>
